<template>
  <el-dialog class="shop-in-category-pup-dialog" :visible.sync="visible" width="80%" :show-close="false" top="8vh">
    <div class="">
      <div class="popup">
        <div class="title">
          <div class="text">{{ $t('shopProcess.editSigningLian') }}</div>
          <div class="tips">
            {{ $t('shopProcess.preSigned') }}
            <span class="bold">{{ totalCount }}</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}，{{ $t('shopProcess.mostAdd') }}
            <span class="bold">50</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}
          </div>
          <div class="close-btn" @click="closePopup"><i class="el-icon-close" /></div>
        </div>

        <!-- 搜索栏 -->
        <div class="search-bar">
          <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="auto" size="small">
            <div class="input-row margin-bottom-none">
              <el-form-item prop="name" :label="$t('shopProcess.lianName')">
                <el-input v-model="searchForm.name" size="small" :placeholder="$t('shopProcess.lianName')"></el-input>
              </el-form-item>
              <div class="default-btn primary-btn" @click="searchChange">{{$t('product.search')}}</div>
              <div class="default-btn" @click="resetSearchForm('searchForm')">{{$t('product.reset')}}</div>
            </div>
          </el-form>
        </div>

        <div class="content">
          <!-- 已签约链平台列表 -->
          <div class="main-container right-box">
            <div class="table-con table-box">
              <!-- height="575" -->
              <el-table
                :data="signLianList"
                header-cell-class-name="table-header"
                width="100%"
              >
                <el-table-column
                  prop="name"
                  :label="this.$i18n.t('shopProcess.lianName')"
                >
                  <template slot-scope="scope">
                    <span class="table-cell-text">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="code"
                  :label="this.$i18n.t('shopProcess.lianCode')"
                >
                  <template slot-scope="scope">
                    <span class="table-cell-text">{{ scope.row.blockchainCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="imgUrl"
                  :label="this.$i18n.t('shopProcess.lianLogo')"
                >
                  <template slot-scope="scope">
                    <el-image
                      class="rotating-img"
                      :src="scope.row.imgUrl.indexOf('http')===-1 ? resourcesUrl + scope.row.imgUrl : scope.row.imgUrl"
                      :preview-src-list="scope.row.imgUrl.indexOf('http')===-1 ? [resourcesUrl + scope.row.imgUrl] : [scope.row.imgUrl]"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="discount"
                  :label="this.$i18n.t('shopProcess.lianDiscount')"
                >
                  <template slot-scope="scope">
                    <div class="custom-rate">
                      <el-input
                        v-model="scope.row.discount"
                        type="number"
                        :min="0"
                        :max="99.9999"
                        :precision="4"
                        placeholder="0~99.9999"
                        size="small"
                        style="width: 80%;"
                        @blur="checkCustomizeRateInt(scope)"
                        @keydown.native="channelInputLimit"
                      />%
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="status"
                  :label="this.$i18n.t('shopProcess.lianStatus')"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.blockchainShopStatus === 1" class="tag-txt">{{ $t('publics.normal') }}</div>
                    <div v-if="scope.row.blockchainShopStatus === 0" class="tag-txt red-tag-txt">{{ $t('publics.LowerShelf') }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  :label="this.$i18n.t('remindPop.operation')"
                  width="100px"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="default-btn text-btn" @click="deleteLian(scope)">{{ $t('remindPop.delete') }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                v-if="signLianList.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      shopId: 0,
      // 图片前缀
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      allLianList: [],
      visible: false,
      signLianList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      totalCount: null, // 总数量
      searchForm: {} // 搜索
    }
  },
  methods: {
    // 初始化
    init (shopId) {
      this.shopId = shopId
      this.visible = true
      this.getSignLianList()
    },

    /**
     * 获取签约链平台列表
     */
    getSignLianList () {
      this.$http({
        url: this.$http.adornUrl(`/platform/blockchain/pageSigningByShopId`),
        method: 'get',
        params: this.$http.adornParams(Object.assign({
          'shopId': this.shopId,
          'current': this.page.currentPage,
          'size': this.page.pageSize,
          'status': 1 // 签约状态：1：已通过 0待审核 -1未通过
        }, this.searchForm))
      }).then(({ data }) => {
        this.signLianList = data.records
        this.page.total = data.total
        this.page.currentPage = data.current
        if (this.totalCount === null) {
          this.totalCount = data.total
        }
      })
    },

    /**
     * 自定义扣率输入框判断
     */
    checkCustomizeRateInt (scope) {
      const { row, $index } = scope
      const orgCustomizeRate = JSON.parse(JSON.stringify(this.signLianList[$index].discount))
      let customizeRate = parseFloat(row.discount)
      let verification = true
      // 如果当前项原本无自定义扣率，失焦时输入框内容为空，则终止
      if ((!orgCustomizeRate && orgCustomizeRate !== 0) && (!customizeRate && customizeRate !== 0)) {
        return
      }
      if (customizeRate) {
        // 0~99.9999
        const reg = /^(([1-9]{0,1}?\d{1}?)|(0{1}))(\.\d{0,4})?$/
        if (!reg.test(customizeRate)) {
          this.messageClosed = false
          this.$message({
            message: this.$i18n.t('shopProcess.customizeDiscountEditSuccess'),
            type: 'error',
            duration: 2000,
            onClose: () => {
              this.messageClosed = true
            }
          })
          verification = false
        }
      }
      if (verification) {
        this.changeCustomizeRateInt(scope)
      }
    },

    channelInputLimit (e) {
      const key = e.key
      // 不允许输入'-'
      if (key === '-' || key === '+') {
        e.returnValue = false
        return false
      }
      return true
    },

    /**
     * 修改扣率
     */
    changeCustomizeRateInt (scope) {
      const param = {
        blockchainId: scope.row.blockchainId,
        discount: scope.row.discount,
        shopId: this.shopId
      }
      this.$http({
        url: this.$http.adornUrl('/platform/blockchainShop/updateDiscount'),
        method: 'put',
        params: param
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('shopProcess.customizeDiscountEditSuccess'),
          type: 'success',
          duration: 1000,
          onClose: () => {}
        })
      })
    },

    /**
     * 删除选中链平台
     * @param {Number} id 链平台id
     * @param {Number} index 选中链平台列表索引
     */
    deleteLian (scope) {
      this.$confirm(this.$i18n.t('shopProcess.deleteSigningLianTips') + '[' + scope.row.name + ']?', this.$i18n.t('chat.tips'), {
        confirmButtonText: this.$i18n.t('webInfoConfig.determine'),
        cancelButtonText: this.$i18n.t('webInfoConfig.cancellation'),
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/platform/blockchainShop'),
          method: 'DELETE',
          params: this.$http.adornParams({
            blockchainId: scope.row.blockchainId,
            shopId: this.shopId
          })
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.deleteSigningLianSuccess'),
            type: 'success',
            duration: 1000,
            onClose: () => {}
          })
          this.getSignLianList()
          this.totalCount--
        })
      }).catch(() => {})
    },

    /**
     * 关闭弹窗
     */
    closePopup () {
      this.$emit('closePopup', 'lian')
    },

    searchChange () {
      this.page.currentPage = 1
      this.getSignLianList()
    },

    /**
     * 重置表单
     * @param {String} formName 表单名称
     */
    resetSearchForm (formName) {
      this.$refs[formName].resetFields()
      this.searchForm = {}
    },

    handleSizeChange (val) {
      this.page.pageSize = val
      this.getSignLianList()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getSignLianList()
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-in-category-pup-dialog {
  & ::v-deep .el-dialog__header {
    padding: 0;
  }
  & ::v-deep .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
  }
  & ::v-deep .el-dialog {
    min-width: 950px;
  }
  // margin-bottom: 200px;
  .popup {
    // position: absolute;
    // top: 0;
    // bottom: 0;
    // left: 50%;
    // transform: 50;
    // right: 0;
    // width: 1270px;
    // height: 730px;
    // background: #FFFFFF;
    // margin: auto;
    // z-index: 101;
    display: block;

    .search-bar {
      margin-top: 20px;
    }

    .red-tag-txt {
      color: #ff4949;
    }

    // 表格上的标题
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 64px;
      // padding-left: 20px;
      border-bottom: 1px solid #EAEAEA;
      .text {
        height: 23px;
        line-height: 21px;
        font-size: 16px;
        .stress {
          color: #FF2120;
        }
      }
      .tips {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        color: #999;
        margin-left: 10px;
        .bold {
          color: #333;
        }
      }
      .close-btn {
        font-size: 23px;
        color: #DEDEDE;
        margin-left: auto;
        // margin-right: 20px;
        cursor: pointer;
      }
    }

    // 预览图片
    .rotating-img {
      width: 60px;
      height: 60px;
    }
    .rotating-img:not(:last-child) {
      margin-right: 5px;
    }

    // 内容
    .content {
      // display: flex;
      // align-items: top;
      // justify-content: space-between;
      // padding: 0 20px;
      // margin-top: 20px;
      .main-container {
        margin-top: 0;
      }
      .left-box {
        width: 20%;
        .search-box {
          position: relative;
          // width: 262px;
          width: 100%;
          height: 36px;
          background: #FFFFFF;
          border: 1px solid #E8E9EC;
          box-sizing: border-box;
          .search-input {
            width: 100%;
            height: 100%;
            padding: 0 67px 0 12px;
            border: none;
            outline: none;
            box-sizing: border-box;
          }
          input::-webkit-input-placeholder {
            font-size: 14px;
            color: #999;
          }
          .search-btn {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 55px;
            height: 100%;
            font-size: 20px;
            color: #CBCED4;
            border-left: 1px solid #E8E9EC;
            cursor: pointer;
          }
        }
        .brand-box {
          // width: 262px;
          width: 100%;
          height: 540px;
          border: 1px solid #E9EAEC;
          box-sizing: border-box;
          overflow-y: scroll;
          margin-top: 14px;
          .brand-list {
            .brand-item {
              width: 100%;
              height: 47px;
              line-height: 47px;
              font-size: 14px;
              padding-left: 14px;
              overflow: hidden;
              cursor: pointer;
              margin-bottom: 3px;
            }
            .active {
              background: rgba(24, 144, 255, 0.13);
            }
          }
          /* 谷歌隐藏滚动条 */
          &::-webkit-scrollbar {
            display: none;
          }
          /* 隐藏滚动条，当IE下溢出，仍然可以滚动 */
          /* IE隐藏滚动条 */
          -ms-overflow-style: none;
          /* 火狐隐藏滚动条 */
          overflow: -moz-scrollbars-none;
        }
        /* 谷歌隐藏滚动条 */
        &::-webkit-scrollbar {
          display: none;
        }
        /* 隐藏滚动条，当IE下溢出，仍然可以滚动 */
        /* IE隐藏滚动条 */
        -ms-overflow-style: none;
        /* 火狐隐藏滚动条 */
        overflow: -moz-scrollbars-none;
      }
      .right-box {
        // width: 946px;
        // width: 80%;
        width: 100%;
        // margin-left: 21px;
        .table-box {
          // width: 100%;
          // height: 487px;
          // border: 1px solid #E9EAEC;
          border-top: 1px solid #E9EAEC;
          border-left: 1px solid #E9EAEC;
          border-right: 1px solid #E9EAEC;
          box-sizing: border-box;
          padding-bottom: 0;
          & ::v-deep .el-table__body-wrapper {
            // max-height: 540px;
            height: 490px;
            overflow-y: scroll;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE 10+ */
          }
          & ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
          & ::v-deep .el-table__body {
            width: 100%;
          }
          // & ::v-deep .el-table th.gutter {
          //   display: table-cell !important;
          // }
          // & ::v-deep .el-table__body-wrapper .el-table__body {
          //   width: 100% !important;
          // }
          // & ::v-deep .el-table--scrollable-y .el-table__body-wrapper {
          //   /* 谷歌隐藏滚动条 */
          //   &::-webkit-scrollbar {
          //     display: none;
          //   }
          //   /* 隐藏滚动条，当IE下溢出，仍然可以滚动 */
          //   /* IE隐藏滚动条 */
          //   -ms-overflow-style: none;
          //   /* 火狐隐藏滚动条 */
          //   overflow: -moz-scrollbars-none;
          // }
          // & ::v-deep tr.el-table__row:last-child {
          //   td {
          //     border-bottom: 0;
          //   }
          // }
          // 上传图片框
          // & ::v-deep .el-upload {
          //   display: flex;
          //   align-items: center;
          //   justify-content: center;
          //   width: 65px;
          //   height: 65px;
          //   background: #FCFCFC;
          //   border: 1px solid #EAEAEA;
          //   border-radius: 0;
          //   box-sizing: border-box;
          //   .el-icon-plus {
          //     font-size: 22px;
          //     color: #EAEAEA;
          //   }
          //   img {
          //     width: 100%;
          //     height: 100%;
          //   }
          // }
          // & ::v-deep  .el-upload-list__item {
          //   display: block;
          //   width: 65px;
          //   height: 65px;
          //   border-radius: 0;
          // }

          // 上传图片样式
          .business-qual {
            & ::v-deep .el-upload-list--picture-card .el-upload-list__item {
              width: 80px;
              height: 80px;
              margin-bottom: 0;
            }
            & ::v-deep .el-upload--picture-card {
              width: 80px;
              height: 80px;
              line-height: 80px;
            }
            & ::v-deep .el-upload {
              width: 80px;
              height: 80px;
              line-height: 80px;
              .pic {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        .custom-box {
          display: flex;
          align-items: center;
          width: 962px;
          height: 60px;
          font-size: 14px;
          background: #FAFAFA;
          border: 1px solid #EAEAEA;
          box-sizing: border-box;
          margin-top: 17px;
          .text {
            padding-left: 30px;
          }
          .add-btn {
            width: 140px;
            height: 36px;
            line-height: 34px;
            text-align: center;
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            box-sizing: border-box;
            margin-left: auto;
            margin-right: 25px;
            cursor: pointer;
          }
        }

      }
    }
    .pagination {
      margin-top: 15px;
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>
